<template>
  <div class="bottomBtns_warp">
    <li v-for="item in btnlist" :key="item.key">
      <img
        v-show="item.isactive"
        :src="item.activelog"
        alt=""
        @click="menuBtnClick(item)"
      />
      <img
        v-show="!item.isactive"
        :src="item.logo"
        alt=""
        @click="menuBtnClick(item)"
      />
      <span
        style="width: 100%"
        :class="item.isactive ? 'isactiveLabel' : 'noactiveLabel'"
        >{{ item.title }}</span
      >
    </li>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick } from "vue";
import logo1 from '../../../assets/image/home/logo1.png'
import logo1a from '../../../assets/image/home/logo1_a.png'
import logo2 from '../../../assets/image/home/logo2.png'
import logo12 from '../../../assets/image/home/logo2_a.png'
import logo3 from '../../../assets/image/home/logo3.png'
import logo3a from '../../../assets/image/home/logo3_a.png'

const emit = defineEmits(['menuBtnClickfun',]);
const btnlist = ref([
  {
    title: "智慧河湖总览",
    class: "zhhhzl",
    key: "zhhhzl",
    path: "/home/zhhhzl",
    id: "1",
    isactive: false,
    logo: logo1,
    activelog: logo1a

  },
  {
    title: "防洪专题",
    class: "fhzt",
    key: "fhzt",
    path: "/home/fhzt",
    id: "2",
    isactive: false,
    logo: logo2,
    activelog: logo12
  },
  {
    title: "河湖长制专题",
    class: "hhzzzt",
    key: "hhzzzt",
    path: "/home/hhzz",
    id: "2",
    isactive: false,
    logo: logo3,
    activelog: logo3a
  }
])

const menuBtnClick = (item) => {
  if (item.isactive) return
  btnlist.value.forEach(row => {
    if (row.key === item.key) {
      row.isactive = true
      emit('menuBtnClickfun', row)
    } else {
      row.isactive = false
    }
  })
}

onMounted(() => {
  menuBtnClick(btnlist.value[0])
})
</script>

<style lang="less" scoped>
.bottomBtns_warp {
  height: auto;
  width: auto;
  display: flex;
  justify-content: center;

  li {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    img {
      cursor: pointer;
      width: 3rem;
    }

    .isactiveLabel {
      color: #4ee6ef;
    }

    .noactiveLabel {
      color: #fff;
    }

    span {
      text-align: center;
      font-size: 1rem;
      margin-top: 0.3rem;
    }
  }
}
</style>